<script setup lang="ts">
import { Page } from '@vben/common-ui';

import { ArrowDown, Download } from '@element-plus/icons-vue';
import {
  ElButton,
  ElCol,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElSelect,
  ElOption,
  ElTable,
  ElTableColumn,
  ElIcon
} from 'element-plus';

const tableData = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
</script>

<template>
  <Page description="" title="角色管理">
    <template #extra>
      <ElButton size="small" type="primary">添加角色</ElButton>
      <ElButton size="small" type="danger">删除</ElButton>
      <ElButton size="small" type="primary">刷新</ElButton>
      <ElButton :icon="Download" size="small" type="success">导出</ElButton>
    </template>

    <ElForm label-suffix=":">
      <ElRow :gutter="20">
        <ElCol :span="6">
          <ElFormItem label="角色名称">
            <ElInput placeholder="请输入角色名称" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="6">
          <ElFormItem label="角色代码">
            <ElInput placeholder="请输入角色代码" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="6">
          <ElFormItem label="状态">
            <ElSelect placeholder="请选择状态">
              <ElOption label="启用" value="1" />
              <ElOption label="禁用" value="0" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="6">
          <ElFormItem class="form-button" label="">
            <ElButton size="small" type="primary">查询</ElButton>
            <ElButton size="small">重置</ElButton>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <ElTable
      :data="tableData"
      border
      row-key="id"
      style="width: 100%; margin-bottom: 20px"
    >
      <ElTableColumn label="序号" type="index" width="90" align="center" />
      <ElTableColumn label="角色ID" prop="date" />
      <ElTableColumn label="角色名称" prop="date" />
      <ElTableColumn label="排序" prop="name" />
      <ElTableColumn label="状态" prop="address" />
      <ElTableColumn label="创建时间" prop="address" />
      <ElTableColumn label="操作" width="210">
        <template #default="scope">
          <ElButton size="small" type="primary">编辑</ElButton>
          <ElButton size="small" type="danger">删除</ElButton>
          <ElDropdown style="margin-left: 10px; margin-top: 2px">
            <ElButton size="small" type="primary">
              更多<ElIcon class="el-icon--right"><ArrowDown /></ElIcon>
            </ElButton>
            <template #dropdown>
              <ElDropdownMenu>
                <ElDropdownItem>角色权限</ElDropdownItem>
                <ElDropdownItem>分配用户</ElDropdownItem>
              </ElDropdownMenu>
            </template>
          </ElDropdown>
        </template>
      </ElTableColumn>
    </ElTable>
  </Page>
</template>

<style scoped></style>
